<template>
  <div ref="warp">
    <div ref="echartEl" :style="{width: data.width + 'px',height: data.height + 'px'}"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, onBeforeUnmount, markRaw } from "vue";
import echarts from '@/utils/echatsConfig.ts'
// import type { ECOption } from '@/utils/echatsConfig.ts'
import { SVGRenderer, CanvasRenderer } from 'echarts/renderers';
echarts.use([SVGRenderer, CanvasRenderer]);
let props = defineProps<{
  option: {
    name: string
    prop: string
  }[]
}>()
let warp = ref()
let echartEl = ref()
let data = reactive({
  zoom: 260 / 320,
  barCharts: {} as any,
  width: 320,
  height: 260
})
onMounted(() => {
  data.width = warp.value.clientWidth
  data.height = data.width * data.zoom
});


function init(monthList: any[]){
  if(!data.barCharts.setOption){
    data.barCharts = markRaw(echarts.init(echartEl.value, undefined, { 
      renderer: 'svg' 
    }));
  }
  data.barCharts.setOption(getOption(monthList));
  // 必要，否则图标会以原始尺寸渲染
  data.barCharts.resize({ 
    width: data.width,
    height: data.height
  });
}

function getOption(monthList: any[]) {
  // let colors = ['#70FFF9','#70BFFF','#587DFF','#7ED321','#F58723','#FA493F'];
  return {
    grid: {
      top: data.zoom * 80 +'px',
      left: data.zoom * 45 +'px',
      right: data.zoom * 45 +'px',
      bottom: data.zoom * 28 +'px'
    },
    legend: {
      data: [
        {
          name: props.option[0].name,
          icon: 'image://'
        },
        {
          name: props.option[1].name,
          icon: 'image://'
        },
        {
          name: props.option[2].name,
          icon: 'image://'
        }
      ],
      left: 12 * data.zoom,
      top: 10 * data.zoom,
      itemWidth: 10 * data.zoom,
      itemHeight: 10 * data.zoom,
      textStyle:{
        color: '#FFFFFF',
        fontSize: data.zoom * 14 + 'px'
      }
    },
    xAxis: [
      {
        type: 'category',
        data: getXAxis(monthList),
        axisTick: {
          show: false
        },
        axisLine:{
          lineStyle:{
            color: '#7595CA'
          }
        },
        axisLabel: {
          color: '#FFFFFFA0',
          fontSize: data.zoom * 12 + 'px',
          interval: 1,
          align: 'right',
          formatter: (a: string) =>{
            if(a.split('/').length > 1){
              return '{year|'+a.split('/')[0]+'}'+' {day|'+a.split('/')[1]+'}';
            }else{
              return a;
            }
          },
          rich: {
            year: {
              fontSize: data.zoom * 10 + 'px',
              color: '#FFFFFF80'
            },
            day: {
              fontSize: data.zoom * 12 + 'px'
            }
          }
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '(万元)',
        min: 0,
        nameTextStyle: {
          color: '#FFFFFFA0',
          fontSize: data.zoom * 12 + 'px',
          padding: [0,0,0,-40 * data.zoom]
        },
        axisLabel: {
          color: '#FFFFFFA0',
          fontSize: data.zoom * 12 + 'px'
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#25406D'
          }
        },
        axisTick:{
          show: true,
          length: 10,
          inside: true,
          lineStyle:{
            color: '#7595CA'
          }
        }
      },
      {
        type: 'value',
        name: '(%)',
        min: 0,
        max: 100,
        interval: 20,
        nameTextStyle: {
          color: '#FFFFFFA0',
          fontSize: data.zoom * 12 + 'px',
          padding: [0,0,0,40 * data.zoom]
        },
        axisLabel: {
          color: '#FFFFFFA0',
          fontSize: data.zoom * 12 + 'px'
        },
        splitLine: {
          show: false
        },
        axisTick:{
          show: true,
          length: 10,
          inside: true,
          lineStyle:{
            color: '#7595CA'
          }
        }
      }
    ],
    series: [
      {
        name: props.option[0].name,
        type: 'bar',
        barWidth: data.zoom * 6 + 'px',
        data: getReceivableAmount(monthList),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
            { offset: 0, color: '#4930EF' },
            { offset: 1, color: '#00FFC7' }
          ]),
          borderRadius:[4,4,0,0]
        }
      },
      {
        name: props.option[1].name,
        type: 'bar',
        barWidth: data.zoom * 6 + 'px',
        data: getReceivedAmount(monthList),
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
            { offset: 0, color: '#7BD43C' },
            { offset: 1, color: '#D2FE2E' }
          ]),
          borderRadius:[4,4,0,0]
        }
      },
      {
        name: props.option[2].name,
        type: 'line',
        yAxisIndex: 1,
        data: getCollectedRate(monthList),
        itemStyle:{
          color: '#F58723'
        },
        symbol: 'none',
        lineStyle: {
          width: 1
        }
      }
    ]
  };
}

// 获取时间轴
function getXAxis(monthList: any[]) {
  let year = monthList[0].monthDate ? monthList[0].monthDate.split('-')[0] : '';
  let xAxis = new Array();
  if(year){
    xAxis.push(year + '/' + monthList[0].monthDate.split('-')[1]);
  }else{
    xAxis.push('-');
  }
  for(let i = 1; i < monthList.length; i++){
    if(!monthList[i].monthDate){
      xAxis.push('');
    }else if(year == monthList[i].monthDate.split('-')[0]){
      xAxis.push(monthList[i].monthDate.split('-')[1]);
    }else{
      year = monthList[i].monthDate.split('-')[0];
      xAxis.push(year + '/' + monthList[i].monthDate.split('-')[1]);
    }
  }
  return xAxis;
}
// 每月应收
function getReceivableAmount(monthList: any[]) {
  return monthList.map(s => {return s[props.option[0].prop] ? (s[props.option[0].prop] / 10000).toFixed(2) : 0;});
}
// 每月实收
function getReceivedAmount(monthList: any[]) {
  return monthList.map(s => {return s[props.option[1].prop] ? (s[props.option[1].prop] / 10000).toFixed(2) : 0;});
}
// 收缴率
function getCollectedRate(monthList: any[]) {
  return monthList.map(s => {return s[props.option[2].prop] ? s[props.option[2].prop] * 100 : 0;});
}

onBeforeUnmount(() => {
  data.barCharts.dispos && data.barCharts.dispose()
})

defineExpose({
  init
})


</script>